<!--
这是一个用于展示工作列表的HTML模板。该模板会遍历传入的工作列表，并为每个工作生成一个列表项。每个列表项包含工作的类别、名称和城市信息，并链接到对应工作的详细页面。如果没有可用的工作，将显示"No jobs are available."。

Parameters:
job_list (list): 一个包含工作信息的列表，每个元素是一个字典，包含'type_name'（工作类型名）、'job_name'（工作名）和'city_name'（城市名）等键值对。

Returns:
str: 返回一个HTML字符串，包含格式化后的工作列表或"No jobs are available."的信息。
-->

{% extends 'base.html' %}

{% block content %}
    <style>
        ul {
            list-style-type: none; /* 移除默认的列表项标记 */
            padding: 0; /* 移除默认的填充 */
            margin: 0; /* 移除默认的边距 */
            background-color: #f4f4f4; /* 背景颜色 */
        }

        li {
            padding: 10px; /* 内边距 */
            margin-top: 2px; /* 上边距 */
            background-color: #fff; /* 列表项背景颜色 */
            border-bottom: 1px solid #ddd; /* 底部边框 */
        }

        li a {
            text-decoration: none; /* 移除下划线 */
            color: blue; /* 链接颜色 */
            font-weight: bold; /* 字体加粗 */
        }

        li a:hover {
            text-decoration: underline; /* 鼠标悬停时添加下划线 */
        }
         </style>
{% if job_list %}
    <ul>
    {% for job in job_list %}
        <li style="font-size: 30px;text-align: center;">{{job.type_name}}————<a href="/job/{{ job.id }}/" style="color:blue">{{ job.job_name }}</a>————{{job.city_name}}  </li>
    {% endfor %}
    </ul>
{% else %}
    <p>No jobs are available.</p>
{% endif %}

{% endblock %}